<template>
    <div class="mine">
        <div class="header">
            <div class="user-info is-nologin" v-if="!$store.getters.getUserInfo">
                <div class="content">
                    <span class="login-tip"
                        @click="$router.push({ name: 'login', query: { next: '/mine' } })">登录/注册</span>
                    <span class="follow-tip">关注品牌 第一时间发现更多新品、折扣</span>
                </div>
                <div class="to-login-arrow"></div>
            </div>
            <div class="user-info is-login" v-else>
                <img v-if="!$store.getters.getUserInfo.avatar" class="headimg"
                    src="@/assets/img/mine/header-default.png">
                <img v-else class="headimg" :src="$store.getters.getUserInfo.avatar">
                <div class="username-info">
                    <div class="nick">
                        <span class="nickname">{{ $store.getters.getUserInfo.name }}</span>
                    </div>
                    <div class="account-type">手机帐号</div>
                </div>
                <img class="member-card" src="@/assets/img/mine/black-card.png">
            </div>
        </div>
        <div class="order-list">
            <van-grid :column-num="5" :border="false">
                <van-grid-item v-for="item in orderList" :key="item.name">
                    <img :src="item.img">
                    <span>{{ item.name }}</span>
                </van-grid-item>
            </van-grid>
        </div>
        <div class="discount-list">
            <van-grid :column-num="3" :border="false">
                <van-grid-item v-for="item in discountList" :key="item.name">
                    <img :src="item.img">
                    <span>{{ item.name }}</span>
                </van-grid-item>
            </van-grid>
        </div>
        <div class="config-list">
            <van-grid :column-num="4" :border="false">
                <van-grid-item v-for="item in configList" :key="item.name">
                    <img :src="item.img">
                    <span>{{ item.name }}</span>
                </van-grid-item>
            </van-grid>
        </div>
        <img src="@/assets/img/mine/promise.png" class="promise">
        <div class="recommand" v-if="recommandList">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <van-row>
                    <van-col span="12" v-for="(item, index) in recommandList" :key="index">
                        <router-link :to="{ name: 'detail', params: { id: item.goodsItem.goodsId } }">
                            <img :src="item.goodsItem.goodsImage" class="bigimg">
                            <div class="text">
                                <div class="flag">
                                    <img :src="item.goodsItem.countryLogo">
                                    <span>{{ item.goodsItem.countryName }}</span>
                                </div>
                                <div class="title">
                                    <img :src="img" v-for=" img in item.goodsItem.titleForeHeadLabelList" :key="img">
                                    {{ item.goodsItem.goodsName }}
                                </div>
                                <div class="benefit">
                                    <span v-for="info in item.goodsItem.labelListWithStyle" :key="info.content">
                                        {{ info.content }}
                                    </span>
                                </div>
                                <div class="price">
                                    <span class="pretxt" v-if="item.goodsItem.enjoyPriceInfo.enjoyPricePrefix">
                                        {{ item.goodsItem.enjoyPriceInfo.enjoyPricePrefix }}
                                    </span>
                                    <div class="coin">￥</div>
                                    <span class="money">{{ item.goodsItem.enjoyPriceInfo.enjoyPriceInteger }}</span>
                                </div>
                            </div>
                        </router-link>
                    </van-col>
                </van-row>
            </van-list>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            orderList: [
                {
                    img: require("@/assets/img/mine/stay-pay.png"),
                    name: "待付款"
                },
                {
                    img: require("@/assets/img/mine/fahuo.png"),
                    name: "待发货"
                },
                {
                    img: require("@/assets/img/mine/shouhuo.png"),
                    name: "待收货"
                },
                {
                    img: require("@/assets/img/mine/tuikuan.png"),
                    name: "退货退款"
                },
                {
                    img: require("@/assets/img/mine/all.png"),
                    name: "全部订单"
                }
            ],
            discountList: [
                {
                    img: require("@/assets/img/mine/discount.png"),
                    name: "优惠券"
                },
                {
                    img: require("@/assets/img/mine/redpack.png"),
                    name: "红包"
                },
                {
                    img: require("@/assets/img/mine/bean.png"),
                    name: "考拉豆"
                }
            ],
            configList: [
                {
                    img: require("@/assets/img/mine/collect.png"),
                    name: "收藏"
                },
                {
                    img: require("@/assets/img/mine/download.png"),
                    name: "下载"
                },
                {
                    img: require("@/assets/img/mine/kefu.png"),
                    name: "帮助与客服"
                },
                {
                    img: require("@/assets/img/mine/set.png"),
                    name: "设置"
                }
            ],
            recommandList: [],
            loading: false,
            finished: false,
            pageNo: 1
        }
    },
    created() {
        this.$apiProxy({
            url: "recommendFeeds/getMiniAppRecommendFeeds?version=1.0&group=onlinejd",
            method: "post",
            data: {
                recommendFeedsParam: {
                    pageNo: this.pageNo,
                    pageSize: 20,
                    tabId: 0,
                    extraMap: {
                        single: "1"
                    }
                }
            }
        }).then(res => {
            // console.log(res);
            this.pageNo++;
            this.recommandList = res.body.recList;
            // console.log(this.recommandList);
        })
    },
    methods: {
        onLoad() {
            this.$apiProxy({
                url: "recommendFeeds/getMiniAppRecommendFeeds?version=1.0&group=onlinejd",
                method: "post",
                data: {
                    recommendFeedsParam: {
                        pageNo: this.pageNo,
                        pageSize: 20,
                        tabId: 0,
                        extraMap: {
                            single: "1"
                        }
                    }
                }
            }).then(res => {
                this.pageNo++;
                this.recommandList = this.recommandList.concat(res.body.recList);
                this.loading = false;
                if (!res.body.hasMore) {
                    this.finished = true
                }
                if (this.recommandList.length >= 100) {
                    this.finished = true
                }
            });
        },
    },
}
</script>

<style lang="less">
.mine {
    background-color: #efefef;

    .header {
        background: rgb(255, 255, 255);
        color: rgb(0, 0, 0);
        padding: 15px 10px 0;
        height: 32vw;
        border-bottom-left-radius: 500% 100%;
        border-bottom-right-radius: 500% 100%;
        overflow: hidden;
        margin-bottom: 10px;

        .user-info {
            position: relative;
        }

        .is-nologin {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            padding: 0 5px;

            .content {
                display: flex;
                flex-direction: column;

                span {
                    display: block;
                }

                .login-tip {
                    font-size: 20px;
                    font-weight: 700;
                    margin-bottom: 10px;
                }

                .follow-tip {
                    font-size: 13px;
                }
            }

            .to-login-arrow {
                height: 2.4vw;
                width: 2.4vw;
                border-style: solid;
                border-width: 2px 2px 0 0;
                transform: matrix(.71, .71, -.71, .71, 0, 0);
                border-color: rgb(0, 0, 0);
            }
        }

        .is-login {
            display: flex;
            flex-direction: row;
            align-items: center;

            .headimg {
                width: 45px;
                height: 45px;
                border-radius: 50%;
                overflow: hidden;
                vertical-align: middle;
                margin-right: 8px;
            }

            .username-info {
                display: flex;
                flex-direction: column;

                .nick {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    margin-bottom: 6px;

                    .nickname {
                        max-width: 175px;
                        font-size: 20px;
                        font-weight: 700;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        word-wrap: normal;
                        word-break: keep-all;
                    }
                }

                .account-type {
                    font-size: 13px;
                }
            }

            .member-card {
                width: 355px;
                position: absolute;
                top: 64px;
            }
        }
    }

    .order-list,
    .discount-list,
    .config-list {
        margin: 0 10px 10px;
        background-color: #fff;
        border-radius: 4px;
        overflow: hidden;
        display: flex;
        flex-direction: row;
        align-items: center;
        flex: 1;

        .van-grid {
            width: 100%;

            .van-grid-item {
                img {
                    width: 25px;
                    height: 25px;
                    margin-bottom: 10px;
                }

                span {
                    font-size: 12px;
                }
            }
        }
    }

    .config-list {
        span {
            font-size: 12px;
            color: #666;
        }
    }

    .promise {
        margin: 0 10px 10px;
        height: 45.5px;
        border-radius: 4px;
    }

    .recommand {
        margin-bottom: 60px;
        background-color: transparent;

        .van-list {
            .van-row {
                padding: 0px 8px;

                .van-col {
                    margin-top: 5px;
                    position: relative;
                    width: 49%;
                    background-color: #fff;
                    border-radius: 5px;
                    overflow: hidden;
                    display: flex;
                    flex-direction: column;

                    .bigimg {
                        width: 175.5px;
                        height: 175.5px;
                        margin-bottom: 6px;
                    }

                    .text {
                        margin: 0px 6px 9px;
                        display: flex;
                        flex-direction: column;

                        .flag {
                            display: flex;
                            flex-direction: row;
                            align-items: center;
                            height: 15px;
                            margin-bottom: 4px;

                            img {
                                width: 15px;
                                height: 15px;
                                margin-right: 6px;
                            }

                            span {
                                height: 16.5px;
                                font-family: PingFangSC-Regular;
                                font-size: 12px;
                                line-height: 16.5px;
                                color: #666;
                            }
                        }

                        .title {
                            font-family: PingFangSC-Regular;
                            font-size: 13px;
                            color: #333;
                            height: 37px;
                            line-height: 18.5px;
                            display: -webkit-box;
                            overflow: hidden;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;

                            img {
                                width: 26px;
                                height: 13px;
                                top: 2px;
                                position: relative;
                                margin-right: 3.5px;
                                flex-shrink: 0;
                            }
                        }

                        .benefit {
                            display: flex;
                            flex-direction: row;
                            flex-wrap: wrap;
                            margin-top: 5px;
                            height: 15px;
                            overflow: hidden;

                            span {
                                flex-direction: row;
                                flex-grow: 0;
                                flex-shrink: 0;
                                height: 12px;
                                border: 1px solid rgba(255, 0, 0, .5);
                                border-radius: 3px;
                                font-family: PingFangSC-Regular;
                                font-size: 12px;
                                color: red;
                                margin-right: 3px;
                                line-height: 12px;
                                box-sizing: content-box;
                                margin-bottom: 1px;
                            }
                        }

                        .price {
                            display: flex;
                            flex-direction: row;
                            align-items: baseline;
                            justify-content: flex-start;
                            font-family: PingFangSC-Medium;
                            color: red;
                            height: 18px;
                            margin-top: 5px;

                            .pretxt {
                                font-size: 12px;
                                line-height: 11px;
                                position: relative;
                                top: -1px;
                                margin-right: 1px;
                            }

                            .coin {
                                font-size: 12px;
                                line-height: 11px;
                            }

                            .money {
                                font-size: 18px;
                                letter-spacing: 0;
                                line-height: 18px;
                            }
                        }
                    }
                }

                .van-col:nth-child(even) {
                    margin-left: 6px;
                }
            }
        }
    }
}
</style>